<template>
  <div>
    <van-nav-bar @click-left="cancel_order" title="支付" left-text="取消" />
    <p>￥{{ $route.query.totalPrice }}</p>
    <van-number-keyboard :title="password" v-model="password" :show="show" maxlength="6" extra-key="" close-button-text="确定" @close="close" />
    <div class="payee">
      <span class="label">收款方</span>
      <span>张家界学院第五食堂</span>
    </div>
    <van-button type="primary" style="border-radius: 8px; margin-top: 20px" block native-type="submit" @click="pay">立即支付</van-button>
    <payment v-if="paymentShow" />
  </div>
</template>

<script>
import payment from '../../components/payment/index.vue';
export default {
  data() {
    return {
      password: '',
      payNo: '',
      show: false,
      paymentShow: false,
    };
  },
  mounted() {
    this.payNo = this.$route.query.payNo;
  },
  components: {
    payment,
  },
  methods: {
    cancel_order() {
      // this.$router.push({ path: '/order', query: { status: 0 } });
      this.$router.go(-1);
      // this.req
      //   .post("/order/cancel", { orderNo: this.$route.query.orderNo })
      //   .then((res) => {

      //   });
    },
    pay() {
      this.req.get('/user/payPwd').then((res) => {
        if (res.data.checked) {
          this.show = true;
        } else {
          this.$notify({
            type: 'primary',
            message: '请先设置密码',
          });
          this.$router.push('/setpaypassword');
        }
      });
      // this.show = true;
    },
    close() {
      this.paymentShow = true;
      this.req
        .post('/order/pay', {
          payNo: this.payNo,
          payPassword: this.password,
        })
        .then((res) => {
          if (res.status == 400) {
            this.paymentShow = false;
            this.$router.push({ path: '/order', query: { status: 0 } });
            this.$notify({
              type: 'danger',
              message: res.msg,
            });
          } else {
            this.paymentShow = false;
            this.$router.push({
              path: '/paymentsuccess',
              query: { totalPrice: this.$route.query.totalPrice },
            });
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.payee {
  height: 3.125rem;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0.625rem;
  .label {
    color: #ccc;
  }
}
h2 {
  text-align: center;
}
p {
  text-align: center;
  font-size: 2rem;
  font-weight: bolder;
}
</style>
